<template>
	<view>
		<view class="container input-container">
			<view class="row header-row">
				<view class="item">
					<view class="header-icon"></view>
					<text class="title-text">微信码上传</text>
				</view>
			</view>
			<!-- <view class="row">
        <view class="item">
          <text class="remark-text">微信码</text>
        </view>
      </view> -->
			<view class="row image-row">
				<view class="item add-item" v-if="shoukuan_img">
					<image src="@/static/img/close-ico.png" class="delete-icon" @click="deleteImg('wx')">
					</image>
					<image class="choose-image" :src="shoukuan_img" mode="aspectFill" @click="previewImage('wx')">
					</image>
				</view>
				<view class="item add-item" @click="chooseImgs('wx')" v-show="!shoukuan_img">
					<image class="add-icon" src="@/static/img/upload-ico.png">
					</image>
					<text>点击上传</text>
				</view>
			</view>
		</view>

		<view class="container input-container">
			<view class="row header-row">
				<view class="item">
					<view class="header-icon"></view>
					<text class="title-text">支付宝填写</text>
				</view>
			</view>
			<!-- <view class="row">
        <view class="item">
          <text class="remark-text">支付宝码</text>
        </view>
      </view> -->
			<!-- <view class="row image-row">
        <view class="item add-item" v-if="shoukuan_img_alipay">
          <image src="@/static/img/close-ico.png" class="delete-icon" @click="deleteImg('alipay')">
          </image>
          <image class="choose-image" :src="shoukuan_img_alipay" mode="aspectFill" @click="previewImage('alipay')">
          </image>
        </view>
        <view class="item add-item"  @click="chooseImgs('alipay')" v-show="!shoukuan_img_alipay">
          <image class="add-icon" src="@/static/img/upload-ico.png">
          </image>
          <text>点击上传</text>
        </view>
      </view> -->

			<view class="phone flex">
				<view>姓名</view>
				<view class="phone-input flex-bet">
					<view class="phone-left">
						<input class="page-form-input" type="text" name="alipay_name" v-model="alipay_name"
							placeholder="请输入支付宝收款人姓名">
						</input>
					</view>
				</view>
			</view>

			<view class="phone flex">
				<view>账号</view>
				<view class="phone-input flex-bet">
					<view class="phone-left">
						<input class="page-form-input" type="text" name="alipay_account" v-model="alipay_account"
							placeholder="请输入支付宝收款账号">
						</input>
					</view>
				</view>
			</view>


		</view>

		<button @click="backSubmit" class="page-btn">提交</button>

	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../apirequest/config.js'
	import {
		getShoukuan,
		shoukuanSubmit
	} from '../../apirequest/api.js';

	export default {
		data() {
			return {
				lock: 0,
				shoukuan_img_alipay: '',
				shoukuan_img: '',
				img_wx: '',
				img_alipay: '',
				alipay_name: '',
				alipay_account: '',
			}
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			//获取数据
			loadData: function() {
				getShoukuan({}).then((res) => {
					if (res.code == 1) {
						if (res.data) {
							this.shoukuan_img_alipay = res.data.shoukuan_img_alipay;
							this.shoukuan_img = res.data.shoukuan_img;
							this.img_wx = res.data.img_wx;
							this.alipay_account = res.data.alipay_account;
							this.alipay_name = res.data.alipay_name;
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 选择图片
			chooseImgs: function(type) {
				let that = this;
				var upload_image = function(filePath) {
					uni.showLoading({
						title: "正在上传图片",
						mask: !0
					}), uni.uploadFile({
						url: baseUrl + 'common/upload',
						filePath: filePath,
						name: 'file',
						header: {
							//'content-type': 'multipart/form-data',
							"token": uni.getStorageSync('token')
						},
						success: function(data) {
							console.log(data)
							uni.hideLoading({
								complete: (res) => {},
							})
							var img_res = JSON.parse(data.data)
							if (img_res.code == 1) {
								if (type == 'wx') {
									that.shoukuan_img = img_res.data.fullurl;
									that.img_wx = img_res.data.url;
								} else {
									that.shoukuan_img_alipay = img_res.data.fullurl;
									that.img_alipay = img_res.data.url;
								}
							} else {
								uni.showToast({
									title: img_res.msg,
									icon: 'none'
								});
							}
						}
					})
				}

				var _this = this
				uni.chooseImage({
					count: 2,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log("tempFilePaths")
						console.log(res.tempFilePaths)
						const tempFilePaths = res.tempFilePaths
						upload_image(tempFilePaths[0]);

					}
				})
			},
			//图片预览
			previewImage: function(type) {
				var _this = this;
				let index = 0;
				//所有图片
				var imgbox = [];
				if (type == 'wx') {
					imgbox[0] = _this.shoukuan_img;
				} else {
					imgbox[0] = _this.shoukuan_img_alipay;
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			// 删除图片
			deleteImg: function(type) {
				var that = this;
				if (type == 'wx') {
					that.shoukuan_img = '';
					that.img_wx = '';
				} else {
					that.shoukuan_img_alipay = '';
					that.img_alipay = '';
				}
			},

			backSubmit: function() {
				var e = this;
				if (e.lock) return;
				console.log('img_wx', e.img_wx);
				console.log('alipay_account', e.alipay_account);
				console.log('alipay_name', e.alipay_name);
				if (!e.img_wx) {
					uni.showToast({
						title: '请上传收款码',
						icon: "error"
					});
				}

				if (!e.alipay_name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: "error"
					});
				}

				if (!e.alipay_account) {
					uni.showToast({
						title: '请输入收款账号',
						icon: "error"
					});
				}
				var _submit = function() {
					shoukuanSubmit({
						shoukuan_img: e.img_wx,
						alipay_account: e.alipay_account,
						alipay_name: e.alipay_name
					}).then((res) => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								icon: "success"
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "error"
							});
							e.lock = 0;
						}
					}).catch(err => {
						console.log(err)
					})
				};
				_submit();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-btn {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, #ff8546, #ffb130);
		border-radius: 80rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		position: fixed;
		bottom: 28rpx;
		left: 50%;
		transform: translateX(-50%);

		&::after {
			border: none;
		}
	}


	.phone {
		padding: 19px 14px;
		border-bottom: 1px solid #e4e4e4
	}

	.phone view:nth-child(1) {
		width: 72px;
		color: #bec1c7;
		font-size: 30rpx;
	}

	.phone .phone-input {
		flex: 1
	}

	.phone .phone-input .phone-left {
		flex: 1
	}

	.phone .phone-input .phone-left .page-form-input {
		flex: 1;
		color: #a2a1a6
	}

	.phone .phone-input .phone-right {
		color: #cccbd0
	}


	.container {
		margin: 0 11px;
		margin-top: 9px;
		display: flex;
		flex-flow: column;
		background-color: #fff;
		border-radius: 9px
	}

	.container .row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 11px;
		margin-top: 9px
	}

	.container .row .item {
		display: flex;
		align-items: center
	}

	.container .row .item .step-image {
		width: 28px;
		height: 28px
	}

	.container .row .item .step-text {
		color: #333;
		font-size: 28rpx;
	}

	.container .row .item .right-two-icon {
		width: 15px;
		height: 15px
	}

	.container .row .item .title-text {
		color: #333;
		font-size: 32rpx;
		;
		font-weight: 700
	}

	.container .row .item .remark-text {
		color: #9399a3;
		font-size: 28rpx;
	}

	.container .row .item .x-red {
		color: red;
		font-size: 28rpx;
		;
		width: 19px;
		height: 9px;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		line-height: 15px
	}

	.input-container {
		padding-bottom: 9px
	}

	.input-container .row .item .screentshot-image {
		width: 13px;
		height: 13px;
		margin-right: 4px
	}

	.input-container .row .item .screentshot-text {
		color: #005cff;
		font-size: 10px
	}

	.input-container .row .item .star-icon {
		width: 15px;
		height: 15px;
		margin-left: 4px
	}

	.input-container .row .order-input {
		padding: 9px 11px;
		width: 100%;
		background: #f8f9f9;
		border-radius: 3px;
		border: 1px solid #e9eaec;
		font-size: 28rpx;
	}

	.input-container .row .add-item {
		width: 105px;
		height: 105px;
		color: #bec1c7;
		font-size: 24rpx;
		justify-content: center;
		flex-flow: column;
		background-color: #f8f9f9;
		border-radius: 7px;
		border: 1px solid #e9eaec;
		position: relative
	}

	.input-container .row .add-item .add-icon {
		width: 33px;
		height: 33px;
		margin-bottom: 4px
	}

	.input-container .row .add-item .delete-icon {
		position: absolute;
		top: -7px;
		right: -7px;
		width: 19px;
		height: 19px
	}

	.input-container .row .add-item .choose-image {
		width: 100%;
		height: 100%;
		border-radius: 7px
	}

	.input-container .image-row {
		justify-content: flex-start
	}

	.input-container .image-row .item {
		margin-right: 9px
	}

	.input-container .header-row {
		margin-left: 0
	}

	.input-container .header-row .item .header-icon {
		width: 3px;
		height: 18px;
		background-color: #ff8546;
		margin-right: 5px
	}

	.foot-container {
		background-color: unset;
		margin-left: 0;
		margin-right: 0;
		margin-top: 100rpx;
	}

	.foot-container .row {
		margin: 0
	}

	.foot-container .row .submit-icon {
		width: 100%
	}
</style>